﻿@{
    ViewBag.Title = "Manage Media";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
    bool isCategoryPage = !String.IsNullOrEmpty(Model.Category);
}

@model DirigoEdge.Areas.Admin.Models.ViewModels.ManageMediaViewModel



<div class="manageMedia">

    <div class="row">
        <div class="twelve columns">
            <div class="clearfix">
                
                @{
                    string mediaCategoryTitle = String.IsNullOrEmpty(Model.Category) ? "" : " / " + Model.Category;
                }

                <h3><i class="fa fa-folder-open"></i> <a href="/admin/managemedia">Media</a> @mediaCategoryTitle</h3>
                @if (isCategoryPage)
                {
                    <div class="main-actions clearfix">
                        <label for="toggle-thumbnails">
                            <input type="checkbox" id="toggle-thumbnails" checked="checked" autocomplete="off" /> Show Thumbnails
                        </label>
                    
                        <a class="button newContentButton mobileMarginBottom mobileBlockStatic" href="#" data-reveal-id="MediaModal">Add Media +</a>
                    
                    </div>
                }
                else
                {
                    <div class="main-actions clearfix">
                        <a class="button newContentButton mobileMarginBottom mobileBlockStatic" href="#" data-reveal-id="AddFolderModal">Add Folder +</a>
                    </div>
                }
            </div>
            
            @if (!isCategoryPage)
            {
                <ul class="category-listing">
                    @_Helpers.MediaDirectoriesTable()
                </ul>
            }
            else
            {
                @Html.Partial("Partials/MediaListingPartial", Model.MediaListing)
            }
        </div>
    </div>
</div>

@section Modals {
    
    <div id="MediaModal" class="reveal-modal">
        <h2>Upload Media</h2>
        <form action="/admin/fileUpload" class="dropzone" id="my-awesome-dropzone">
            <input type="hidden" name="category" value="@Model.Category"/>
        </form> 
        <a class="close-reveal-modal">&#215;</a>
    </div>
    
    <div id="DeleteMediaModal" class="reveal-modal">
        <div class="content container">
            <h2>Confirm Delete.</h2>
            <p class="lead">Are you sure you want to delete this file?</p>

            <p class=""><strong><span class="file"></span></strong> will be <em>permanently</em> deleted.</p>

            <a id="ConfirmMediaDelete" class="right button confirmDeleteButton confirmModalButton">Delete</a>
            <a class="right button secondary" onclick="$('#DeleteMediaModal').trigger('reveal:close');">Cancel</a>
        </div>

        <a class="close-reveal-modal">&#215;</a>
    </div>
}

@section Scripts {

    <script src="/Areas/Admin/Scripts/jquery/plugins/jquery.zclip.min.js"></script>
    <script src="/Areas/Admin/Scripts/jquery/plugins/dropzone/dropzone.js"></script>
    <link href="/Areas/Admin/Scripts/jquery/plugins/dropzone/css/dropzone.css" type="text/css" rel="stylesheet">
    <link href="/Areas/Admin/Scripts/jquery/plugins/dropzone/css/basic.css" type="text/css" rel="stylesheet">

    <script src="/Areas/Admin/Scripts/jquery/plugins/jquery.dataTables.min.js"></script>

    <script>
        
        @{
            //
            int sort = 0;
            if (isCategoryPage)
            {
                sort = 1;
            }
        }

        $(function () {
            var zclip = undefined;

            oTable = $("table.manageTable").dataTable({
                "iDisplayLength" : 25,
                "fnDrawCallback" : function () {
                    $('.zclip').remove();
                    media.initZClip($(".copy"));
                },
                "aoColumnDefs" : [
                    {
                        "bSortable" : false,
                        "aTargets" : ["thumbnail", "actions", "location"]
                    }
                ],
                "aaSorting": [[@sort, "asc"]]
            });

            zclip = media.initZClip(oTable.$(".copy"));
        });
    </script>
    
    <script>
        $(function () {
            Dropzone.options.myAwesomeDropzone = {
                url : "/mediaupload/uploadfile/",
                init : function () {
                    this.on("success", function (file, data) {

                        if (data && data.success) {
                            
                            var $els = $(data.html);

                            $('.zclip').remove();
                            if (typeof oTable == "undefined") {
                                $('.manageTable tbody').prepend($(data.html));
                            } else {
                                oTable.fnAddTr($els, true);
                            }

                            media.initZClip($(".copy"));
                            
                            if (data.warning) {
                                noty({ text: data.warning, type: 'warning', timeout: 3000 });
                            }
                            
                            $('#MediaModal').trigger('reveal:close');
                            
                        } else {
                            
                            noty({ text: data.error, type: 'error', timeout: 3000 });

                        }
                    });
                }
            };
        });
    </script>
}